import QtQuick
import Qt5Compat.GraphicalEffects
import Fk
import Fk.Components.GameCommon as Game

Game.BasicItem {
  id: root

  property int minionId // 随从id
  property string name  // 随从名
  property string description // 随从描述
  property int mana // 随从法力消耗
  property int hp     // 随从血量
  property int atk // 随从攻击

  /*
  武将图
  法力消耗-------------
  |     图片    |
  |             |
  |             |
  |             |
  |             |
  |             |
  |             |
  |             |
  |             |
  攻击力--------血量  

  */
  // 采用素材贴图还原炉石随从卡外观
  // 建议外层容器按比例缩放；这里以素材原图比例设置默认值
  width: 250
  height: 358

  // 立绘（放在卡框下面，通过框的透明孔显示）
  Image {
    id: portrait
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.top: parent.top
    anchors.topMargin: height * 0.145
    width: parent.width * 0.62
    height: parent.height * 0.50
    source: `${Cpp.path}/packages/hearthstone/image/minions/${name}.png`
    fillMode: Image.PreserveAspectCrop
    smooth: true
    z: 1
  }
  // 前景覆盖（包含法力宝石与左右角标等装饰）
  Image {
    id: frameOverlay
    anchors.fill: parent
    source: `${Cpp.path}/packages/hearthstone/image/basic/minion.png`
    fillMode: Image.PreserveAspectFit
    smooth: true
    z: 10
  }

  // 依据前景贴图的实际绘制尺寸建立定位参考，避免等比缩放造成文字错位
  Item {
    id: layoutGuide
    width: frameOverlay.paintedWidth
    height: frameOverlay.paintedHeight
    anchors.centerIn: parent
    z: 9
  }

  // 名称（位于横幅中央）
  Text {
    id: nameText
    text: root.name || ""
    color: "#ffffff"
    font.pixelSize: Math.round(height * 0.085)
    font.bold: true
    anchors.horizontalCenter: layoutGuide.horizontalCenter
    anchors.top: layoutGuide.top
    anchors.topMargin: layoutGuide.height * 0.50
    z: 11
    horizontalAlignment: Text.AlignHCenter
    style: Text.Outline
    styleColor: "#80222222"
  }

  // 描述文本（下部描述框区域，自动换行）
  Text {
    id: descText
    text: root.description || ""
    color: "#2c1810"
    font.pixelSize: Math.round(height * 0.05)
    wrapMode: Text.WordWrap
    anchors.horizontalCenter: layoutGuide.horizontalCenter
    width: layoutGuide.width * 0.78
    height: layoutGuide.height * 0.20
    anchors.top: layoutGuide.top
    anchors.topMargin: layoutGuide.height * 0.71
    z: 11
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
  }

  // 法力、攻防数字（覆盖在相应宝石/角标上）
  Text {
    id: manaText
    text: (root.mana === undefined || root.mana === null) ? 0 : root.mana
    color: "#ffffff"
    font.pixelSize: 40
    font.weight: Font.Black
    font.bold: true
    anchors.left: layoutGuide.left
    anchors.top: layoutGuide.top
    anchors.leftMargin: layoutGuide.width * 0.09
    anchors.topMargin: layoutGuide.height * 0.085
    z: 12
    style: Text.Outline
    styleColor: "#80222222"
  }

  Text {
    id: atkText
    text: (root.atk === undefined || root.atk === null) ? 0 : root.atk
    color: "#ffffff"
    font.pixelSize: 40
    font.weight: Font.Black
    font.bold: true
    anchors.left: layoutGuide.left
    anchors.top: layoutGuide.top
    anchors.leftMargin: layoutGuide.width * 0.125
    anchors.topMargin: layoutGuide.height * 0.875
    z: 12
    style: Text.Outline
    styleColor: "#80222222"
  }

  Text {
    id: hpText
    text: (root.hp === undefined || root.hp === null) ? 0 : root.hp
    color: "#ffffff"
    font.pixelSize: 40
    font.bold: true
    font.weight: Font.Black
    anchors.left: layoutGuide.left
    anchors.top: layoutGuide.top
    anchors.leftMargin: layoutGuide.width * 0.785
    anchors.topMargin: layoutGuide.height * 0.865
    z: 12
    style: Text.Outline
    styleColor: "#80222222"
  }
}